<!-- resources/templates/index.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layout/default :: layout(title='首页 - 新闻分析系统', content=~{::main})}">
<head>
    <title>首页 - 新闻分析系统</title>
</head>
<body>
<main>
    <!-- 轮播图热门新闻 -->
    <div id="newsCarousel" class="carousel slide mb-4" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <th:block th:each="news, stat : ${hotNews}">
                <button type="button" data-bs-target="#newsCarousel" th:data-bs-slide-to="${stat.index}" 
                        th:class="${stat.first} ? 'active' : ''" th:aria-current="${stat.first} ? 'true' : 'false'" 
                        th:aria-label="'Slide ' + ${stat.count}"></button>
            </th:block>
        </div>
        <div class="carousel-inner rounded">
            <th:block th:each="news, stat : ${hotNews}">
                <div th:class="'carousel-item ' + (${stat.first} ? 'active' : '')">
                    <div class="carousel-bg-img" style="background-color: #6c757d;"></div>
                    <div class="carousel-caption">
                        <h2><a th:href="@{/news/{id}(id=${news.id})}" class="text-white text-decoration-none" th:text="${news.title}">新闻标题</a></h2>
                        <p class="d-none d-md-block" th:text="${#strings.abbreviate(news.content, 100)}">新闻内容...</p>
                    </div>
                </div>
            </th:block>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#newsCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">上一个</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#newsCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">下一个</span>
        </button>
    </div>
    
    <div class="row">
        <!-- 最新新闻 -->
        <div class="col-lg-8">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">最新新闻</h5>
                </div>
                <div class="card-body">
                    <div class="list-group">
                        <th:block th:each="news : ${latestNews}">
                            <a th:href="@{/news/{id}(id=${news.id})}" class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h5 class="mb-1" th:text="${news.title}">新闻标题</h5>
                                    <small th:text="${#temporals.format(news.publishTime, 'yyyy-MM-dd')}">发布日期</small>
                                </div>
                                <p class="mb-1" th:text="${#strings.abbreviate(news.content, 150)}">新闻内容...</p>
                                <small th:text="${news.source}">来源</small>
                            </a>
                        </th:block>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 新闻分类和热度排行 -->
        <div class="col-lg-4">
            <!-- 新闻分类 -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">新闻分类</h5>
                </div>
                <div class="list-group list-group-flush">
                    <a th:href="@{/news/category/政治}" class="list-group-item list-group-item-action">政治</a>
                    <a th:href="@{/news/category/经济}" class="list-group-item list-group-item-action">经济</a>
                    <a th:href="@{/news/category/科技}" class="list-group-item list-group-item-action">科技</a>
                    <a th:href="@{/news/category/体育}" class="list-group-item list-group-item-action">体育</a>
                    <a th:href="@{/news/category/娱乐}" class="list-group-item list-group-item-action">娱乐</a>
                    <a th:href="@{/news/category/教育}" class="list-group-item list-group-item-action">教育</a>
                </div>
            </div>
            
            <!-- 热度排行 -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0">热度排行</h5>
                </div>
                <div class="list-group list-group-flush">
                    <th:block th:each="news, stat : ${hotNews}">
                        <a th:href="@{/news/{id}(id=${news.id})}" class="list-group-item list-group-item-action">
                            <span class="badge bg-danger me-2" th:text="${stat.count}"></span>
                            <span th:text="${#strings.abbreviate(news.title, 30)}">新闻标题</span>
                        </a>
                    </th:block>
                </div>
            </div>
        </div>
    </div>
</main>
</body>
</html>
